<template>
  <el-dialog
    :append-to-body="true"
    :before-close="cancel"
    :close-on-click-modal="false"
    :visible.sync="isDialog"
    :title="isAdd ? '新增' : '编辑'"
    width="1000px"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      :inline="true"
      size="small"
      label-width="120px"
    >
    <el-form-item label="起始点" prop="pstart">
      <el-select v-model="ruleForm.pstart"  style="width: 300px">
        <el-option v-for="(p,i) in pointList" :key="i" :label="p.showName" :value="p.pointId" />
      </el-select>
      </el-form-item>
      <el-form-item label="结束点" prop="pend">
        <el-select v-model="ruleForm.pend"  style="width: 300px">
          <el-option  v-for="(p,i) in pointList" :key="i" :label="p.showName" :value="p.pointId" />
        </el-select>
      </el-form-item>
      <el-form-item label="提示">
        <el-select v-model="ruleForm.hint" placeholder="请选择提示" style="width: 300px">
           <el-option label="直行" value="直行"></el-option>
           <el-option label="左转" value="左转"></el-option>
           <el-option label="右转" value="右转"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="距离">
        <el-input v-model="ruleForm.dist" class="dist" type="Number" placeholder="请输入距离" style="width: 300px" />
      </el-form-item>
      <div>
      <el-form-item label="正序导航图片" style="display: black">
        <el-upload ref="images"
          class="upload-demo"
          action="#"
          :multiple="true"
          accept="image/*"
          :auto-upload="false"
          :on-change="imagesChange"
          :on-remove="removeImage"
          :file-list="imgList"
          list-type="picture-card">
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      </div>
      <div>
        <el-form-item label="倒序导航图片">
          <el-upload ref="imagesDesc"
            class="upload-demo"
            action="#"
            :multiple="true"
            accept="image/*"
            :auto-upload="false"
            :on-change="imagesDescChange"
            :on-remove="removeImagesDesc"
            :file-list="imgDescList"
            list-type="picture-card">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" size="mini" type="primary" @click="submit()"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import pointsApi from '@/network/map/points.api'
export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true,
    },
    locationId: {
      type: String,
      required: true,
    }
  },
  data() {
    return {
      isDialog: false,
      loading: false,
      imgList: [],
      imgDescList: [],
      pointList: [],
      ruleForm: {
        id: '',
        pstart: '',
        pend: '',
        dist: '',
        imageName: '',
        imageNameDesc: '',
        images: [],
        imagesDesc: [],
        hint: '',
        locationId: '',
      },
      rules: {
        pstart: [{ required: true, message: '请输入起始点', trigger: 'blur' }],
        pend: [{ required: true, message: '请输入结束点', trigger: 'blur' }],
        locationId: [
          { required: true, message: '请输入地点名', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    imagesChange(file) {
      this.ruleForm.images.push(file.raw)
    },
    removeImage(file) {
      let index1 = this.imgList.findIndex(item => {
        return item.name == file.name
      })
      if(index1 > -1) this.imgList[index1].url = '';
      let index2 = this.ruleForm.images.findIndex(item => {
        return item === file.raw
      })
      index2 > -1 && this.ruleForm.images.splice(index2,1)
    },
    imagesDescChange(file) {
      this.ruleForm.imagesDesc.push(file.raw)
    },
    removeImagesDesc(file) {
      let index1 = this.imgDescList.findIndex(item => {
        return item.name == file.name
      })
      if(index1 > -1) this.imgDescList[index1].url = '';

      let index2 = this.ruleForm.imagesDesc.findIndex(item => {
        return item === file.raw
      })
      index2 > -1 && this.ruleForm.imagesDesc.splice(index2,1)
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.ruleForm['points'] = this.points
          const ruleForm = this.formatImg(this.ruleForm)
          const data = new FormData()
          for (const key in ruleForm) {
            if(key == 'images') {
              ruleForm[key].map(item => {
                data.append('images',item)
              })
            } else if(key == 'imagesDesc'){
              ruleForm[key].map(item => {
                data.append('imagesDesc',item)
              })
            } else {
              if(key != 'pstart' && key != 'pend') {
                data.append(key,this.ruleForm[key])
              }
            }
          }
          let fun = this.isAdd ? 'addPoints' : 'updatePoints'
          pointsApi[fun](data).then(() => {
            let message = this.isAdd ? '添加成功！' : '修改成功！'
            this.$message({message: message, type: 'success'})
            this.cancel()
          }).catch(err => {
            console.log(err);
            this.loading = false
            // this.isDialog = false
          })
        } else {
          return false;
        }
      });
    },
    formatImg(data) {
      if(this.isAdd) {
        delete data.imageName
        delete data.imageNameDesc
      } else {
        let imgs = this.imgList.map(item => {
          return item.name+ ':$:' + item.url
        })
        let imgsDesc = this.imgDescList.map(item => {
          return item.name+ ':$:' + item.url
        })
        data.images.forEach(item => {
          imgs.push('#')
        })
        data.imagesDesc.forEach(item => {
          imgsDesc.push('#')
        })
        data.imageName = imgs.join(';')
        if(data.imageName != '') data.imageName += ';'
        data.imageNameDesc = imgsDesc.join(';')
        if(data.imageNameDesc != '') data.imageNameDesc += ';'
      }
      return data
    },
    cancel() {
      this.isDialog = false
      this.$refs['images'].clearFiles()
      this.$refs['imagesDesc'].clearFiles()
      this.loading = false
      this.imgList = []
      this.imgDescList = []
      this.ruleForm = {
        id: '',
        pstart: '',
        pend: '',
        dist: '',
        imageName: '',
        imageNameDesc: '',
        images: [],
        imagesDesc: [],
        hint: '',
        locationId: '',
      }
      this.$emit('refresh')
    },
  },
  computed: {
    points() {
      return this.ruleForm.pstart + ',' + this.ruleForm.pend
    },
  },
  watch: {
    'ruleForm.locationId': async function (locationId) {
      if(locationId !== '') {
        const res = await pointsApi.getPoints(locationId)
        this.pointList = res.pointList
        
      } else {
        this.pointList = []
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dist {
  position: relative;
  &::after {
    position: absolute;
    display: block;
    content: '米';
    width: 20px;
    height: 20px;
    color: #999;
    // background-color: #666;
    top: 0;
    right: 0;
  }
}
</style>


